import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:get/route_manager.dart';
import 'package:shudu/utils/global.dart';
import 'package:shudu/utils/image_utils.dart';

class HowPage extends StatefulWidget {
  const HowPage({Key? key}) : super(key: key);

  @override
  State<HowPage> createState() => _HowPageState();
}

class _HowPageState extends State<HowPage> {
  int selIndex = 0;

  final List levels = [
    {"img": "how_h", "name": "每行，只能填写不重复的1~9"},
    {"img": "how_v", "name": "每列，只能填写不重复的1~9"},
    {"img": "how_g", "name": "每个九宫格，只能填写不重复的1~9"},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
            decoration: const BoxDecoration(
                color: mainColor,
                borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(20),
                    bottomRight: Radius.circular(20))),
            child: Stack(
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 10),
                  child: loadAssetImage("mask"),
                ),
                Column(
                  children: [
                    const SizedBox(
                      height: 50,
                    ),
                    const Text(
                      "SUDOKU",
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 30,
                          fontWeight: FontWeight.bold),
                    ),
                    const Text(
                      "玩法介绍",
                      style: TextStyle(
                          color: Colors.white, fontSize: 17),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    levelWidget()
                  ],
                )
              ],
            ),
          ),
          const SizedBox(
            height: 50,
          ),
          GestureDetector(
            onTap: () {
              Get.back();
            },
            child: Container(
              height: 52,
              width: 264,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  border: Border.all(color: mainColor, width: 2),
                  borderRadius: BorderRadius.circular(12)),
              child: const Text(
                "我知道了",
                style: TextStyle(
                    color: mainColor,
                    fontSize: 16,
                ),
              ),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
        ],
      ),
    );
  }

  Widget levelWidget() {
    return SizedBox(
      height: 370,
      child: Swiper(
        loop: false,
        scrollDirection: Axis.horizontal,
        itemCount: levels.length,
        itemBuilder: (BuildContext context, int index) {
          Map map = levels[index];
          return Opacity(
            opacity: selIndex == index ? 1 : 0.3,
            child: Column(
              children: [
                loadAssetImage(map["img"]),
                Text(
                  selIndex == index ? map["name"] : "",
                  style: const TextStyle(
                      color: Colors.white, fontSize: 18),
                ),
                const SizedBox(
                  height: 20,
                )
              ],
            ),
          );
        },
        onIndexChanged: (index) {
          setState(() {
            selIndex = index;
          });
        },
        pagination: SwiperPagination(
            alignment: Alignment.bottomCenter, // 位置 Alignment.bottomCenter 底部中间
            margin: const EdgeInsets.fromLTRB(0, 20, 0, 5), // 距离调整
            builder: DotSwiperPaginationBuilder(
              size: 6,
              activeColor: Colors.white,
              color: Colors.white.withOpacity(0.3),
            )),
        viewportFraction: 0.7,
        scale: 1, // 两张图片之间的间隔
      ),
    );
  }
}
